<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const timeRange = ref('week');
const chartRef = ref(null);
const avgTemp = ref(36.5);
const maxTemp = ref(37.2);
const measureCount = ref(15);

const initChart = () => {
  const chart = echarts.init(chartRef.value);

  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '时间: {b0}<br/>体温: {c0}°C'
    },
    xAxis: {
      type: 'category',
      data: ['6/1', '6/2', '6/3', '6/4', '6/5', '6/6', '6/7']
    },
    yAxis: {
      type: 'value',
      name: '体温(°C)',
      min: 35.5,
      max: 38.5,
      axisLine: {
        lineStyle: {
          color: '#F56C6C'
        }
      }
    },
    series: [{
      data: [36.5, 36.6, 36.8, 37.2, 36.9, 36.7, 36.6],
      type: 'line',
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 3,
        color: '#F56C6C'
      },
      markLine: {
        silent: true,
        data: [{
          yAxis: 37.3,
          name: '发热'
        }],
        label: {
          position: 'end'
        },
        lineStyle: {
          type: 'dashed'
        }
      }
    }]
  };

  chart.setOption(option);
  window.addEventListener('resize', chart.resize);
};

const fetchData = () => {
  console.log('获取体温数据，时间范围:', timeRange.value);
};

onMounted(() => {
  initChart();
  fetchData();
});
</script>

<template>
  <div class="temperature-container">
    <div class="header">
      <h3>体温记录</h3>
      <el-select v-model="timeRange" size="small" @change="fetchData">
        <el-option label="最近7天" value="week" />
        <el-option label="最近14天" value="fortnight" />
        <el-option label="最近30天" value="month" />
      </el-select>
    </div>

    <div ref="chartRef" class="chart" />

    <div class="stats">
      <el-statistic title="平均体温" :value="avgTemp" suffix="°C" />
      <el-statistic title="最高体温" :value="maxTemp" suffix="°C" />
      <el-statistic title="测量次数" :value="measureCount" />
    </div>
  </div>
</template>

<style scoped>
.temperature-container {
  padding: 15px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart {
  width: 100%;
  height: 350px;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
}
</style>